<template>
	<jn-page :bgColor="currentdata.color">
		<u-navbar title=" " :is-back="false" :background="{backgroundColor:currentdata.color}" :border-bottom="false" title-color="#ffffff">
			<view class="slot-wrap">
				<view class="slot-left">
					<u-icon name="home" color="#fff" size="50"></u-icon>
				</view>
				<view class="slot-content">
					<u-tabs :list="listdata" :is-scroll="false" item-width="150" inactive-color="#efefef" bg-color="transparent" active-color="#fff" :current="current" @change="change"></u-tabs>
				</view>
			</view>
		</u-navbar>
		<u-image :src="currentdata.backimage" mode="widthFix" width="100%"/>
		<view class="u-m-l-30 u-m-r-30" >
			<u-image src="/static/20201224193919.png" width="100%" mode="widthFix"/>
			<view class="u-flex u-flex-col u-p-40 radius-b-l-r" style="background-color: #FFFFFF;position: relative;top: -5px;">
				<!-- <view class="u-p-40 u-m-40">
					 <u-image style="width:300rpx" :src="mini.wx_qrcode_url" mode="widthFix"/>
				</view> -->
				<view class="u-p-40" style="width: 100%;">
					<u-button type="primary" shape="circle" @click="openPage()">领红包点外卖</u-button>
				</view>
			</view>
		</view>
		
		<view class="jn-share-cpoy-btn">
			<view class="jn-s-btn">
				<u-button type="warning" :custom-style="{backgroundColor: '#f6dd8b',color:'#1668cb',fontWeight:'600'}" open-type='share'>分享赚钱</u-button>
			</view>
			<view class="jn-c-btn">
				<u-button type="default" :custom-style="{color:'#1668cb',fontWeight:'600'}" @click="copywn">复制文案</u-button>
			</view>
		</view>
		
		<view class="u-m-30 u-p-30 radius" style="color: #FFFFFF;">
			<u-parse :html="currentdata.warm"></u-parse>
		</view>
		<view class="u-p-30"></view>
		<u-modal v-model="show" ref="uModal" :show-title="false" :show-confirm-button="false" :show-cancel-button="false" :async-close="true">
			<slot name="confirm-button">
				<view class="u-m-30">
					<view class="jn-modal-content">
						<view class="jn-avatar">
							<open-data type="userAvatarUrl"></open-data>
						</view>
						<view class="jn-nickname">
							<open-data type="userNickName"></open-data>
						</view>
					</view>
					<view class="jn-model-foot">
						<u-button class="jn-model-btn" type="error" shape="circle" @click="wxauth()">小程序登录</u-button>
						<view class="jn-model-can" @click="btncancel">暂不登录</view>
						<view class="text">
							<text>登录即同意我们的《用户协议》</text>
						</view>
					</view>
				</view>
			</slot>
		</u-modal>
	</jn-page>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				listdata:[],
				currentdata:[],
				show: false,
			}
		},
		onShow: function() {
			this.checklogin();
		},
		onShareAppMessage: function(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '美团，饿了么，单单帮你省',
				path: '/pages/index/index?fromid='+this.vuex_user.userId,
				imageUrl:'https://wm.ab2c.cn/sldier/slider2.png'
			}
		},
		methods: {
			change(index) {
				this.current = index;
				this.currentdata = this.listdata[this.current]
				console.log(this.currentdata)
			},
			copywn(){
				uni.setClipboardData({
				    data: '餐前福利！外卖红包天天领，最高可得66元！',
				    success: function () {
				        console.log('内容已复制');
				    }
				});
			},
			openPage() {
				//#ifdef H5
				window.location.href = this.currentdata.active_list.path;
				//#endif
				
				//#ifdef MP-WEIXIN
				if (this.currentdata.active_list) {
					wx.navigateToMiniProgram({
						appId: this.currentdata.active_list.appid,
						path: this.currentdata.active_list.path,
						success(res) {
							// 打开成功
						}
					});
				}
				//#endif
			},
			checklogin() {
				if (!this.vuex_user.hasLogin) {
					this.show = true;
				} else {
					this.get_cpsconfig();
				}
			},
			get_cpsconfig() {
				this.$u.post('/wxapi/api/get_type_activity', {
						token: this.vuex_token.accessToken,
						pid:2
					})
					.then(res => {
						if (res.code == 200) {
							this.listdata = res.data
							this.currentdata = this.listdata[this.current]
						}
						
					});
			},
			wxauth(){
				var _that = this;
				uni.login({
					provider: 'weixin',
					success: res => {
						_that.$u.vuex('vuex_user.logincode', res.code);
					},
					fail: err => {
						console.error('授权登录失败：' + JSON.stringify(err));
					}
				});
				uni.getUserProfile({
					desc: 'weixin',
					success: infoRes => {
						_that.$u.vuex('vuex_user.userinfo', infoRes.userInfo);
						uni.getSetting({
							success(res) {
								if (res.authSetting['scope.userInfo']) {
									_that.$u.post('/wxapi/wxlogin', {
											code: _that.vuex_user.logincode,
											userinfo: _that.vuex_user.userinfo,
											fromid:_that.vuex_user.fromid
										})
										.then(res => {
											console.log(res);
											_that.$u.toast(res.info);
											if (res.code == 200) {
												_that.$u.vuex('vuex_user.userId', res.data.id);
												_that.$u.vuex('vuex_user.hasLogin', true);
												_that.$u.vuex('vuex_token.accessToken', res.data.token);
												_that.$u.vuex('vuex_token.refreshToken', res.data.expire);
												_that.get_cpsconfig();
												_that.show = false;
											} else {
											}
											return false;
										});
								}
							}
						});
					},
					fail(res) {
						console.log(res)
						uni.showToast({
							icon: 'none',
							title: '登陆失败'
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.jn-share-cpoy-btn {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 30rpx;
		.jn-s-btn {
			flex: 1;
			margin-right: 30rpx;
		}
		.jn-c-btn{
			flex:1;
			margin-left: 30rpx;
		}
	}
	.jn-modal-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: auto;
		.jn-avatar {
			overflow:hidden;
			display: block;
			width: 130rpx;
			height: 130rpx;
			margin: 20rpx;
			margin-top: 50rpx;
			border-radius: 50%;
			border: 4rpx solid #fff;
			box-shadow: 6rpx 6rpx 20rpx rgba(0, 0, 0, 0.2);
		}
	}
	.jn-model-foot {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 30rpx;
		width: 100%;
		.jn-model-btn {
			margin: 15rpx 0;
			width: 100%;
		}
		.jn-model-can {
			padding: 20rpx 0;
		}
		.text {
			font-size: 24rpx;
			color:#a8a8a8;
		}
	}
	
	.radius {
		border-radius:15rpx;
	}
	.radius-b-l-r {
		border-radius: 0 0 30rpx 30rpx;
	}
	.slot-wrap {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
		padding: 0 30rpx;
		.slot-left {
			
		}
		.slot-content {
			flex: 1;
			display: flex;
			justify-content: center;
			width: 100%;
			
		}
	}
</style>
